<template>
  <div>
    <c-title :hide="false" :text="'兑换权益'" />
    <p class="title">可用{{ love_name }}：{{ love  }}</p>
    <main>
      <article class="card">
        <p class="c-333 left" style="padding-bottom: 1rem;">输入{{ love_name }}兑换权益值</p>
        <van-field v-model.number="love_name_amount" type="number" maxlength="15">
          <template #left-icon>
            <i class="iconfont icon-fontclass-jifen c-f15353 fz-2"></i>
          </template>
          <template #extra>
            <span class="c-f15353" @click="AllExChange">全部兑换</span>
          </template>
        </van-field>
        <div class="line"></div>
        <div class="computed-wrapper">
          <p class="hint pr-8">{{ equity_rate }}%权益值：{{ equity_love }}{{ love_name }}</p>
          <p class="hint">可获得{{ EquityValues.toFixed(2) }}%的权益值</p>
          <p class="hint">实际扣除{{ ActualDeduction }}{{ love_name }}</p>
        </div>
        <van-button type="danger" class="btn" @click="ExChange">兑换</van-button>
      </article>
    </main>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      love: '',
      love_name: "爱心值",
      love_name_amount: 0,
      equity_rate: "", //后台兑换比例
      equity_love: "", //后台兑换需要爱心值
      settlement_time: ""
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.settlement_time = this.$route.params.settlement_time;
      this.love_name_amount = "";
    },
    getData() {
      $http.post("plugin.zhp-bonus-pool.frontend.reward-log.exchange-equity-page").then(res => {
        if (res.result == 1) {
          this.love_name = res.data.love_name;
          this.love = res.data.love
          this.equity_love = res.data.equity_love;
          this.equity_rate = res.data.equity_rate;
        }
      });
    },
    ExChange() {
      this.ExChangeEquity();
    },
    ExChangeEquity() {
      $http.post("plugin.zhp-bonus-pool.frontend.reward-log.exchange-equity", { exchange_love: this.love_name_amount }).then(res => {
        console.log(res)
        if (res.result == 1) {
          this.love_name_amount = "";
          Toast(res.msg);
          this.getData()
        } else {
          Toast(res.msg);
        }
      });
    },
    AllExChange() {
      this.love_name_amount = this.love;
    }
  },
  computed: {
    EquityValues() {
      return this.love_name_amount / this.equity_love * this.equity_rate;
    },
    ActualDeduction() {
      return this.love_name_amount<this.equity_love ?  0 : parseInt(this.love_name_amount / this.equity_love) * this.equity_love;
    }
  }
};
</script>

<style lang="scss" scoped>
.pr-8 {
  padding-right: 0.8rem;
}

main {
  margin: 1rem;
  padding: 2rem;
  overflow: hidden;
  background-color: #fff;
  text-align: left;

  .computed-wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .btn {
    margin-top: 2rem;
    width: 16rem;
    border-radius: 0.4rem;
  }

  .hint {
    text-align: left;
    color: #888;
    margin-top: 0.5rem;
    font-size: 0.7rem;
  }

  .left {
    text-align: left;
  }

  .fz-2 {
    font-size: 2rem;
  }

  .c-333 {
    color: #333;
  }

  .c-f15353 {
    color: #f15353;
  }

  .line {
    width: 17rem;
    background-color: #5498fc;
    opacity: 0.5;
    height: 0.15rem;
    margin-left: 0.19rem;
  }

  ::v-deep .van-cell {
    padding: 0.3rem 0;
  }
}

.title {
  margin-left: 1rem;
  margin-top: 1rem;
  text-align: left;
}
</style>
